<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教师首页</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <!-- vue.js必须放在elementUI.js前面 -->
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/axios.js"></script>

</head>
<body>

<div id="app">
    <el-input style="width: 200px;" clearable v-model="query.name" placeholder="教师名称"></el-input>
    <el-button @click="toAdd">添加</el-button>

    <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="tname"
                label="老师名称">
        </el-table-column>
        <el-table-column
                prop="tage"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="学生名称">
        </el-table-column>
    </el-table>


    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[2,4,6,8]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible" :before-close="closeDialog" top="5px">
        <el-form :model="form" ref="ts" label-width="100px" class="demo-dynamic">
            <el-form-item label="老师名称" :label-width="formLabelWidth" >
                <el-input v-model="form.tname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="老师年龄" :label-width="formLabelWidth" >
                <el-input v-model="form.tage" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(stus, index) in form.stus"
                    :label="'学生' + (index+1)"
                    :prop="'stus.' + index + '.sname'">
                <el-input v-model="stus.sname" placeholder="学生姓名"></el-input>
                <el-button @click.prevent="removeDomain(stus)">删除</el-button>
            </el-form-item>
            <el-form-item>
<!--                <el-button type="primary" @click="submitForm('form')">提交</el-button>-->
                <el-button @click="addDomain">新增学生</el-button>
<!--                <el-button @click="resetForm('ts')">重置</el-button>-->
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addEmp">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>

    new Vue({
        el: "#app",
        data: {
            query: {
                name: "",
                page: 1,
                size: 2
            },
            total: 0,
            tableData: [],
            multipleSelection: [],
            cList:[],

            // dynamicValidateForm: {
            //     domains: [{
            //         value: ''
            //     }]
            // },


            dialogFormVisible: false,
            form: {
                name:"",
                age: "",
                stus: [{
                    sname: '',
                    age:''
                }]
            },
            formHobby: [],
            formLabelWidth: '120px',

            mode: {
                title: "",
                url: ""
            },


            ////上传需要
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],


        },
        watch: {
            query: {
                deep: true,
                handler() {
                    this.initData();
                }
            },
        },
        methods: {
            bing(){
                window.open("goods/bing.html")
            },
            zhuan(){
                window.open("goods/zhuan.html")
            },
            //上传需要的方法
            handleRemove(file, fileList) {
                this.form.image = "";
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadSuccess(response, file, fileList) {
                this.form.image = response;
            },
            delAll() {
                if (this.multipleSelection.length > 0) {
                    this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        let ids = this.multipleSelection.map(item => item.id)

                        axios.post("/teach/delAll.do?ids=" + ids.join(",")).then(res => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData()
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        type: 'info',
                        message: '请选择数据'
                    });
                }
            },
            delOne(id) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/teach/delTeach.do?id=" + id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData()
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            toEdit(t) {
                this.form = JSON.parse(JSON.stringify(t));

                // this.fileList = [{url: t.image}];
                this.dialogFormVisible = true;
                this.mode = {
                    title: "修改老师",
                    url: "/teach/editTeach.do"
                }
            },
            closeDialog(done) {
                this.initFormData();
                done();
            },
            addEmp() {

                axios.post(this.mode.url, this.form).then(res => {
                    this.initFormData();
                    //重新加载数据
                    this.initData();
                })


            },
            //清理表单
            initFormData() {
                //清理表单
                this.form = {
                    name:"",
                    age: "",
                    stus: [{
                        name: '',
                        age:''
                    }]
                };
                this.formHobby = [];
                this.fileList = [];
                this.dialogFormVisible = false;
            },
            toAdd() {
                this.dialogFormVisible = true;
                this.mode = {
                    title: "添加老师",
                    url: "/teach/addTeach"
                };
                this.findCorporation();
            },
            findCorporation(){
                axios.get(`/corporation/findAll.do`).then(r=>{
                    this.cList=r.data;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.query.size = val;
            },
            handleCurrentChange(val) {
                this.query.page = val;
            },
            initData() {
                axios.post(`/teach/findPage?page=${this.query.page}&size=${this.query.size}`,this.query).then(res => {
                    this.tableData = res.data.rows;
                    this.total = res.data.total;

                    //顺便解决了：删除最后一条数据自动向前翻页问题
                    if (this.tableData.length == 0 && this.query.page > 1) {
                        this.query.page--;
                    }

                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var index = this.form.stus.indexOf(item);
                if (index !== -1) {
                    this.form.stus.splice(index, 1)
                }
            },
            addDomain() {
                this.form.stus.push({
                    name: '',
                    age:''
                });
            }

        },
        created() {
            this.initData()
        }
    })
</script>

</body>
</html>